<template>
  <Card>
    <div class="searchBox">
      <Form ref="searchForm" :label-width="110" :model="searchForm" inline>
        <FormItem label="车牌号：" prop="license_plate_num">
          <Input
            v-model="searchForm.license_plate_num"
            clearable
            placeholder="支持模糊搜索"
            style="width: 150px"
            type="text"/>
        </FormItem>
        <FormItem label="车辆线路：" prop="line">
          <Select v-model="searchForm.line" clearable placeholder="选择线路" style="width:150px;">
            <Option value="-1">全部</Option>
            <Option v-for="item in lines" :key="item.value" :value="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="司机名称：" prop="driver">
          <Input v-model="searchForm.driver" clearable placeholder="支持模糊搜索" style="width: 150px" type="text"/>
        </FormItem>
        <FormItem label="查询日期：" prop="date">
          <DatePicker
            v-model="searchForm.date"
            placeholder="请选择日期"
            placement="bottom-end"
            style="width: 150px"
            type="date"></DatePicker>
        </FormItem>
        <FormItem style="margin-left: -90px">
          <Button icon="md-search" type="primary" @click="handleSearch">搜索</Button>
          <Button @click="handleResetSearch">重置</Button>
        </FormItem>
      </Form>
    </div>
    <vxe-table
      ref="xTable"
      :data="tableData"
      :loading="loading"
      :sort-config="{trigger: 'cell'}"
      align="left"
      border
      height="auto"
      highlight-hover-row
      max-height="500"
      resizable
      show-overflow
      size="mini">
      <vxe-table-column field="license_plate_num" title="车牌号"></vxe-table-column>
      <vxe-table-column field="line" title="线路"></vxe-table-column>
      <vxe-table-column field="driver" title="驾驶员"></vxe-table-column>
      <vxe-table-column :formatter="formatterSignRange" field="sign_range" min-width="70px" title="打卡时间范围">
      </vxe-table-column>
      <vxe-table-column field="sign_number" title="打卡次数"></vxe-table-column>
      <vxe-table-column field="work_hours" title="工作时长(小时)"></vxe-table-column>
      <vxe-table-column field="normal_time" title="正常班"></vxe-table-column>
      <vxe-table-column field="over_time" title="加班"></vxe-table-column>
      <vxe-table-column field="night_over_time" title="晚上加班"></vxe-table-column>
      <vxe-table-column field="modify_reason" title="修改原因"></vxe-table-column>
      <!-- <vxe-table-column align="center" title="操作" width="110" fixed="right">
        <template v-slot="{ row }">
          <vxe-button type="text" @click="toEdit(row)" style="color: #2773c3; font-size: 12px">编辑
          </vxe-button>
        </template>
      </vxe-table-column> -->
    </vxe-table>
  </Card>
</template>
<script>
import {attendanceList} from '../../api/attendance'

export default {
  data() {
    return {
      searchForm: {
        license_plate_num: '',
        line: '-1',
        driver: '',
        date: '',
      },
      tableData: [],
      loading: false,
      lines: [],
    }
  },
  mounted() {
    this.getAttendanceList()
    this.getLinesArray()
  },
  methods: {
    async getLinesArray() {
      this.lines = await this.getLines()
    },
    formatterSignRange({cellValue, row}) {
      return (cellValue = row.start_sign_time + '-' + row.end_sign_time)
    },
    //获取列表数据
    getAttendanceList() {
      this.loading = true
      attendanceList(this.searchForm).then((res) => {
        this.loading = false
        if (res.data) {
          this.tableData = res.data.lists
          this.searchForm.date = res.data.date
          this.searchForm.license_plate_num = res.data.license_plate_num
          this.searchForm.line = res.data.line
          this.searchForm.driver = res.data.driver
        }
      })
    },
    //重置搜索条件
    handleResetSearch() {
      this.$refs.searchForm.resetFields()
      this.tableData = []
    },
    //条件搜索
    handleSearch() {
      this.getAttendanceList()
    },
  },
}
</script>
